<template>
  <div class="panel">
    <div class="panel-header">
      <slot name="panel-header">
        <h3>panel-header</h3>
      </slot>
    </div>
    <div class="panel-body">
      <slot name="panel-body">
        <h3>panel-body</h3>
      </slot>
    </div>
  </div>
</template>

<script lang="babel" type="es6">

  export default{
    data(){
      return{

      }
    },
    components:{

    }
  }
</script>
<style lang="less">
  .panel{
    background: #fff;
    border: 1px solid #d1dbe5;
    /*box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);*/
    .panel-header{
      background-color: #eef1f6;
      margin: 0;
      border-bottom: 1px solid #d1dbe5;
      padding: 0;
      position: relative;
      h3{
        padding: 0 16px;
        height: 42px;
        box-sizing: border-box;
        line-height: 42px;
        list-style: none;
        font-size: 14px;
        color: #8391a5;
        position: relative;
        margin: 0;
      }
    }
    .panel-body{
      padding: 12px;
      color: #505050;
    }
  }
</style>
